<template>
  <div class="min-h-full flex flex-col">
    <div class="text-4xl mb-5">
      <span v-if="route.query.keywords">
        查找"{{ route.query.keywords }}"
      </span>
      <span v-else>{{ route.query.name || getSourceText }}</span>
    </div>
    <div v-loading="pending">
      <div
        class="bg-white px-5 rounded overflow-hidden"
        v-if="data.lists.length"
      >
        <div class="pt-5 text-tx-secondary" v-if="route.query.keywords">
          为您找到相关结果 {{ data.count }}个
        </div>
        <InformationItems
          v-for="item in data.lists"
          :key="item.id"
          :id="item.id"
          :title="item.title"
          :desc="item.intro"
          :click="item.visit"
          :author="item.author"
          :create-time="item.createTime"
          :image="item.image"
          :only-title="false"
        />
        <div class="py-4 flex justify-end">
          <el-pagination
            v-model:current-page="params.pageNo"
            :total="data.count"
            :page-size="params.pageSize"
            hide-on-single-page
            @current-change="refresh()"
          />
        </div>
      </div>
      <div v-else class="flex-1 flex justify-center items-center">
        <el-empty
          :image="empty_news"
          description="暂无文章"
          :image-size="250"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElPagination, ElEmpty } from "element-plus";
import empty_news from "@/assets/images/empty_news.png";
import { getArticleList } from "~~/api/news";
const route = useRoute();
const sort = computed(() =>
  route.params.source == "search" ? "" : route.params.source
);
const keyword = computed(() => route.query.keywords || "");
const cid = computed(() => route.query.cid || "");
const params = reactive({
  pageNo: 1,
  pageSize: 15,
  keyword,
  cid,
  sort,
});
const { data, refresh, pending } = await useAsyncData(
  () => getArticleList(params),
  {
    initialCache: false,
  }
);

const getSourceText = computed(() => {
  switch (route.params.source) {
    case "hot":
      return "热门文章";
    case "new":
      return " 最新文章";
    default:
      return "全部文章";
  }
});

watch([() => route.query.keywords, () => route.query.cid], () => {
  refresh();
});
</script>
<style lang="scss" scoped></style>
